<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
          name="viewport">
    <title>lyc</title>
    <link href="./style.css" rel="stylesheet">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="app-container">
    <button class="mode-switch">
        <svg class="sun" class="feather feather-sun" fill="none" stroke="#fbb046" stroke-linecap="round" stroke-linejoin="round"
             stroke-width="2" viewBox="0 0 24 24">
            <defs/>
            <circle cx="12" cy="12" r="5"/>
            <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
        </svg>
        <svg class="moon" class="feather feather-moon" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round"
             stroke-width="2" viewBox="0 0 24 24">
            <defs/>
            <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/>
        </svg>
    </button>
    <div class="left-side">
        <div class="navigation">
            <a class="nav-link icon" id="init-game">
                <svg class="feather feather-home" fill="none" stroke="currentColor" stroke-linecap="round"
                     stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/>
                    <path d="M9 22V12h6v10"/>
                </svg>
            </a>
            <a class="nav-link icon" id="game-message">
                <svg class="feather feather-help-circle" fill="none" height="24" stroke="currentColor" stroke-linecap="round"
                     stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24"
                     xmlns="http://www.w3.org/2000/svg">
                    <circle cx="12" cy="12" r="10"/>
                    <path d="M12 8v4M12 16h.01M12 9a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1z"/>
                </svg>
            </a>
            <a class="nav-link icon" href="#">
                <svg class="feather feather-phone-call" fill="none" stroke="currentColor" stroke-linecap="round"
                     stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"
                     xmlns="http://www.w3.org/2000/svg">
                    <path d="M15.05 5A5 5 0 0119 8.95M15.05 1A9 9 0 0123 8.94m-1 7.98v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z"/>
                </svg>
            </a>
            <a class="nav-link icon" href="#">
                <svg class="feather feather-hard-drive" fill="none" height="24" stroke="currentColor" stroke-linecap="round"
                     stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24"
                     xmlns="http://www.w3.org/2000/svg">
                    <line x1="22" x2="2" y1="12" y2="12"/>
                    <path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/>
                    <line x1="6" x2="6.01" y1="16" y2="16"/>
                    <line x1="10" x2="10.01" y1="16" y2="16"/>
                </svg>
            </a>
            <a class="nav-link icon" href="#">
                <svg class="feather feather-users" fill="none" height="24" stroke="currentColor" stroke-linecap="round"
                     stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24"
                     xmlns="http://www.w3.org/2000/svg">
                    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
                    <circle cx="9" cy="7" r="4"/>
                    <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
                    <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
                </svg>
            </a>
            <a class="nav-link icon" href="#">
                <svg class="feather feather-folder" fill="none" stroke="currentColor" stroke-linecap="round"
                     stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>
                </svg>
            </a>
            <a class="nav-link icon" id="game-settings">
                <svg class="feather feather-settings" fill="none" stroke="currentColor" stroke-linecap="round"
                     stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"
                     xmlns="http://www.w3.org/2000/svg">
                    <circle cx="12" cy="12" r="3"/>
                    <path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z"/>
                </svg>
            </a>
        </div>
    </div>
    <div class="app-main">
        <div class="player-wrapper" id="player-wrapper">
            <!-- 游戏参与者将通过JavaScript动态生成 -->
        </div>
        <div class="video-call-actions ">
            <button class="video-action-button mic"></button>
            <button class="video-action-button camera"></button>
            <button class="video-action-button maximize"></button>
            <button class="video-action-button endcall">Leave</button>
            <button class="video-action-button magnifier">
                <svg class="feather feather-zoom-in" fill="none" stroke="currentColor" stroke-linecap="round"
                     stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="11" cy="11" r="8"/>
                    <path d="M21 21l-4.35-4.35M11 8v6M8 11h6"/>
                </svg>
                <span>100%</span>
                <svg class="feather feather-zoom-out" fill="none" height="24" stroke="currentColor" stroke-linecap="round"
                     stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24"
                     xmlns="http://www.w3.org/2000/svg">
                    <circle cx="11" cy="11" r="8"/>
                    <line x1="21" x2="16.65" y1="21" y2="16.65"/>
                    <line x1="8" x2="14" y1="11" y2="11"/>
                </svg>
            </button>
        </div>
    </div>
    <div class="right-side">
        <button class="btn-close-right">
            <svg class="feather feather-x-circle" fill="none" height="24" stroke="currentColor" stroke-linecap="round"
                 stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24"
                 xmlns="http://www.w3.org/2000/svg">
                <defs></defs>
                <circle cx="12" cy="12" r="10"></circle>
                <path d="M15 9l-6 6M9 9l6 6"></path>
            </svg>
        </button>
        <div class="chat-container">
            <div class="chat-header">
                <button class="chat-header-button" id="game-start">
                    游戏开始
                </button>
            </div>
            <div class="chat-area" id="chat-area">
                <div class="message-wrapper">
                    <div class="profile-picture">
                        <img alt="participant" src="img/npc_dota_hero_rubick.gif"></div>
                    <div class="message-content">
                        <p class="name">HOPPINAI</p>
                        <div class="message">你好啊，这是狼人杀😍</div>
                    </div>
                </div>
                <div class="message-wrapper">
                    <div class="profile-picture">
                        <img alt="participant" src="img/npc_dota_hero_rubick.gif"></div>
                    <div class="message-content">
                        <p class="name">HOPPINAI</p>
                        <div class="message">这里是<a class="mention">源代码@gitee</a>⬇️</div>
                        <div class="message-file">
                            <div class="icon sketch">
                                <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M96 191.02v-144l160-30.04 160 30.04v144z" fill="#ffd54f"/>
                                    <path d="M96 191.02L256 16.98l160 174.04z" fill="#ffecb3"/>
                                    <path d="M0 191.02l256 304 256-304z" fill="#ffa000"/>
                                    <path d="M96 191.02l160 304 160-304z" fill="#ffca28"/>
                                    <g fill="#ffc107">
                                        <path d="M0 191.02l96-144v144zM416 47.02v144h96z"/>
                                    </g>
                                </svg>
                            </div>
                            <div class="file-info">
                                <div class="file-name">狼人杀源代码</div>
                                <div class="file-size">1 MB</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="message-wrapper">
                    <div class="profile-picture">
                        <img alt="participant" src="img/npc_dota_hero_rubick.gif"></div>
                    <div class="message-content">
                        <p class="name">HOPPINAI</p>
                        <div class="message">有问题可以微信🤯 <a class="mention">@zhangqiff19</a></div>
                    </div>
                </div>
            </div>
            <div class="chat-typing-area-wrapper">
                <div class="chat-typing-area">
                    <input class="chat-input" id="message-input" placeholder="输入内容..." type="text">
                    <button class="send-button" id="send-message">
                        <svg class="feather feather-send" fill="none" stroke="currentColor" stroke-linecap="round"
                             stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"
                             xmlns="http://www.w3.org/2000/svg">
                            <path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/>
                        </svg>
                    </button>
                </div>
            </div>
        </div>
        <div class="participants">
            <div class="participant profile-picture">
                <img alt="participant" src="img/npc_dota_hero_rubick.gif"></div>
            <div class="participant profile-picture">
                <img alt="participant" src="img/npc_dota_hero_rubick.gif"></div>
            <div class="participant profile-picture">
                <img alt="participant" src="img/npc_dota_hero_rubick.gif"></div>
            <div class="participant profile-picture">
                <img alt="participant" src="img/npc_dota_hero_rubick.gif"></div>
            <div class="participant-more">2+</div>
        </div>
    </div>
    <button class="expand-btn">
        <svg class="feather feather-message-circle" fill="none" height="24" stroke="currentColor" stroke-linecap="round"
             stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24"
             xmlns="http://www.w3.org/2000/svg">
            <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
        </svg>
    </button>
</div>
<!-- LLM设置模态框 -->
<div id="llm-settings-modal" class="modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); align-items: center; justify-content: center; z-index: 1000;">
    <div style="
        background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
        border-radius: 15px;
        padding: 30px;
        width: 90%;
        max-width: 500px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    ">
        <h2 style="
            color: #4ecdc4;
            text-align: center;
            margin-bottom: 20px;
            font-size: 1.8rem;
        ">
            大模型设置
        </h2>
        
        <div style="margin-bottom: 20px;">
            <label style="
                display: block;
                color: #fff;
                margin-bottom: 8px;
                font-weight: bold;
            ">
                AI代理地址:
            </label>
            <input 
                type="text" 
                id="api-base-url" 
                placeholder="例如: http://localhost:3000/v1"
                style="
                    width: 100%;
                    padding: 10px;
                    border: 2px solid #4a4a4a;
                    border-radius: 5px;
                    background-color: #3a3a3a;
                    color: #fff;
                    font-size: 1rem;
                "
            />
        </div>
        
        <div style="margin-bottom: 20px;">
            <label style="
                display: block;
                color: #fff;
                margin-bottom: 8px;
                font-weight: bold;
            ">
                API Key:
            </label>
            <input 
                type="password" 
                id="api-key" 
                placeholder="sk-..."
                style="
                    width: 100%;
                    padding: 10px;
                    border: 2px solid #4a4a4a;
                    border-radius: 5px;
                    background-color: #3a3a3a;
                    color: #fff;
                    font-size: 1rem;
                "
            />
        </div>
        
        <div style="margin-bottom: 30px;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
                <label style="
                    display: block;
                    color: #fff;
                    font-weight: bold;
                ">
                    对话大模型:
                </label>
                <button 
                    id="refresh-models"
                    style="
                        padding: 5px 15px;
                        background: #4a4a4a;
                        color: #fff;
                        border: none;
                        border-radius: 20px;
                        font-size: 0.8rem;
                        cursor: pointer;
                        transition: all 0.3s ease;
                    "
                >
                    刷新模型列表
                </button>
            </div>
            <select 
                id="model-name"
                style="
                    width: 100%;
                    padding: 10px;
                    border: 2px solid #4a4a4a;
                    border-radius: 5px;
                    background-color: #3a3a3a;
                    color: #fff;
                    font-size: 1rem;
                "
            >
                <option value="">加载中...</option>
            </select>
            <div id="model-status" style="
                margin-top: 5px;
                font-size: 0.8rem;
                color: #666;
                text-align: right;
            ">
                使用默认模型列表
            </div>
        </div>
        
        <div style="display: flex; gap: 15px; justify-content: center;">
            <button 
                id="save-llm-settings"
                style="
                    padding: 10px 30px;
                    background: linear-gradient(135deg, #4ecdc4, #45b7aa);
                    color: #fff;
                    border: none;
                    border-radius: 30px;
                    font-size: 1rem;
                    font-weight: bold;
                    cursor: pointer;
                    transition: all 0.3s ease;
                "
            >
                保存设置
            </button>
            <button 
                class="close-modal"
                style="
                    padding: 10px 30px;
                    background: #666;
                    color: #fff;
                    border: none;
                    border-radius: 30px;
                    font-size: 1rem;
                    font-weight: bold;
                    cursor: pointer;
                    transition: all 0.3s ease;
                "
            >
                取消
            </button>
        </div>
    </div>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script src="./script.js"></script>
<script src="./chat.js"></script>
<script src="./prompt.js"></script>
<script src="./game.js"></script>
</body>
</html>